<template>
	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer" @touchmove.stop.prevent="clear">
		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }" @tap="close('mask')" />
		<!-- 动态设置宽度：使用计算后的宽度 -->
		<view class="uni-drawer__content" 
		      :class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}" 
		      :style="{width: calculatedWidth + 'px'}">
			<slot />
		</view>
		<!-- #ifdef H5 -->
		<keypress @esc="close('mask')" />
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef H5
	import keypress from './keypress.js'
	// #endif
	export default {
		name: 'UniDrawer',
		components: {
			// #ifdef H5
			keypress
			// #endif
		},
		emits: ['change'],
		props: {
			mode: { type: String, default: '' },
			mask: { type: Boolean, default: true },
			maskClick: { type: Boolean, default: true },
			ratio: { type: Number, default: 0.8 },
		},
		data() {
			return {
				visibleSync: false,
				showDrawer: false,
				rightMode: false,
				watchTimer: null,
				calculatedWidth: 0,
				windowWidth: 0 // 保存当前窗口宽度
			}
		},
		created() {
			this.rightMode = this.mode === 'right' // 初始化方向
		},
		mounted() {
			// 1. 初始化：计算初始宽度
			this.calcDrawerWidth()
			// 2. 监听屏幕尺寸变化
			this.resizeHandler = (res) => {
				this.calcDrawerWidth(res.size.windowWidth)
			}
			uni.onWindowResize(this.resizeHandler)
		},
		methods: {
			clear() {},
			// 计算抽屉宽度的核心方法
			calcDrawerWidth(windowWidth) {
				// 如果没有传入windowWidth，主动获取系统信息
				if (!windowWidth) {
					const systemInfo = uni.getSystemInfoSync()
					windowWidth = systemInfo.windowWidth
				}
				
				this.windowWidth = windowWidth
				this.calculatedWidth = Math.floor(windowWidth * this.ratio)
			},
			close(type) {
				if ((type === 'mask' && !this.maskClick) || !this.visibleSync) return
				this._change('showDrawer', 'visibleSync', false)
			},
			open() {
				if (this.visibleSync) return
				this._change('visibleSync', 'showDrawer', true)
			},
			_change(param1, param2, status) {
				this[param1] = status
				if (this.watchTimer) clearTimeout(this.watchTimer)
				this.watchTimer = setTimeout(() => {
					this[param2] = status
					this.$emit('change', status)
				}, status ? 50 : 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$uni-mask: rgba($color: #000000, $alpha: 0.4) ;
	// 圆角大小
	$drawer-radius: 20rpx; 

	.uni-drawer {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 999;
	}

	.uni-drawer__content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
		top: 0;
		bottom: 0;
		background-color: #fff; 
		transition: transform 0.3s ease;
		border-radius: $drawer-radius;
		overflow: hidden;
	}

	// 左侧抽屉
	.uni-drawer--left {
		left: 0;
		transform: translateX(-100%);
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	// 右侧抽屉
	.uni-drawer--right {
		right: 0;
		transform: translateX(100%);
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.uni-drawer__content--visible {
		transform: translateX(0px);
	}

	.uni-drawer__mask {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: $uni-mask;
		transition: opacity 0.3s;
	}

	.uni-drawer__mask--visible {
		opacity: 1;
	}
</style>